<template>
  <div>
    <div
      v-for="item in optionsArr"
      :key="item.id"
      class="initP"
      :class="isactive === item.id ? 'isactive' : ''"
      :label="item.id"
      @click="changeAction(item)"
    >
      {{ item.codname }}
      <p v-if="isactive === item.id" class="isactivespan" />
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['multi', 'name', 'label', 'value', 'disabled', 'optionsurl', 'date', 'options'],
  data() {
    return {
      checkList: this.value,
      optionsArr: [],
      isactive: null
    }
  },
  watch: {
    value() {
      //   this.currentValue = this.value
    }
  },
  created() {
    // this.currentValue = this.value
    if (this.optionsurl) this.queryAction()
    else this.optionsArr = this.options
  },
  methods: {
    changeAction(item) {
      this.isactive = item.id
      this.$emit('input', this.name, item.id)
    },
    onInputSelect(value) {
      const pravmas = this.optionsArr.filter(i => value.indexOf(i.id) > -1)
      // console.log(pravmas)
      this.$emit('input', this.name, pravmas)
    },
    queryAction() {
      // console.log(this.date)

      this.api[this.optionsurl]({ ...this.date })
        .then(res => {
          this.optionsArr = res
        })
        .finally(() => {
          this.pagelistLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.initP {
  position: relative;
  padding: 0 0.2rem;
  margin: 0 0.02rem;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  height: 38px;
  line-height: 38px;
  border: 1px solid #000965;
  vertical-align: middle;
  overflow: hidden;
}
.isactive {
  background: #000965;
  color: #fff;
}
.isactivespan {
  position: absolute;
  right: 4px;
  bottom: 1px;
  width: 9px;
  transform: rotate(45deg);
  height: 15px;
  background: #ffffff !important;
}
.isactivespan::after {
  position: absolute;
  top: -1px;
  left: -1px;
  content: '';
  background: #000965;
  width: 8px;
  height: 14px;
}
.isactiveimg {
  position: absolute;
  width: 26px;
  // right: -10px;
  // bottom: -1px;
}
</style>
